<template>
	<view class="confirmContainer">
		<view class="navBarContainer">
			<view class="navBar">
				<view class="back" @click="goBack">
					<view class="iconContainer">
						<u-icon name="arrow-left" size="20"></u-icon>
					</view>
				</view>
				<text class="title">确认订单</text>
				<view class="other">
					
				</view>
			</view>
		</view>
		<view class="allContainer">
			<view class="restContainer">
				<view class="restInfo">
					<view class="restImg">
						
					</view>
					<view class="restTitle">
						<view class="title">
							{{storeInfo.shop_name}}
						</view>
						<view class="warning">
							尽快取餐 <u-icon name="arrow-right" color="#999999"></u-icon>
						</view>
					</view>
				</view>
				<view class="selectMethod">
					<view class="in" @click="inFood=true" :style="[inFood==true?{borderColor:'rgb(228,0,48)'}:{}]">
						<view class="check" :style="[inFood==true?{opacity:1}:{}]">
							<u-icon name="checkmark" color="#FFF" bold></u-icon>
						</view>
						<view class="img">
							
						</view>
						<view class="info">
							<view class="title">
								堂食
							</view>
							<view class="content">
								店内就餐
							</view>
						</view>
					</view>
					<view class="out" @click="inFood=false" :style="[inFood==false?{borderColor:'rgb(228,0,48)'}:{}]">
						<view class="check" :style="[inFood==false?{opacity:1}:{}]">
							<u-icon name="checkmark" color="#FFF" bold></u-icon>
						</view>
						<view class="img">
							
						</view>
						<view class="info">
							<view class="title">
								外带
							</view>
							<view class="content" style="color:rgb(223, 50, 52)">
								少接触 更安心
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="phone">
				<view class="title">
					联系电话
				</view>
				<view class="phoneNumber">
					{{userInfo.phone}}
				</view>
			</view>
			<view class="orderInfo">
				<view class="title">
					<view class="content">
						餐品详情
					</view>
				</view>
				<view class="allContent">
					<view class="food" v-for="(food,index) in cartFoods" :key="index">
						<view class="infoContent">
							<view class="foodImg" :style="[{backgroundImage:'url('+food.image+')'}]">
								
							</view>
							<view class="info">
								<view class="name">
									{{food.name}}
								</view>
								<view class="foodContent">
									×{{food.number}}
								</view>
							</view>
						</view>
						<view class="priceContainer">
							￥<view class="price">{{food.amount}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="otherInfo">
				<view class="remark" @click="show=true">
					<view class="title">
						备注
					</view>
					<view class="content">
						<view>
							口味、偏好等要求 <u-icon name="arrow-right" color="#999999"></u-icon>
						</view>
					</view>
				</view>
				<view class="method">
					<view class="title">
						开票方式
					</view>
					<view class="content">
						请在取餐时洽服务员开票
					</view>
				</view>
			</view>
		</view>
		<view class="tabBar">
			<view class="warning">
				<view>
					自取:{{storeInfo.shop_name}} 尽快取餐
				</view>
			</view>
			<view class="confirmInfoContainer">
				<view class="confirmInfo">
					<view class="allPay">
						<view class="title">
							合计:
						</view>
						<view class="payPrice">
							￥{{allPrice}}
						</view>
					</view>
				</view>
				<view class="confirmClick" @click="goPay">
					<view class="title">
						提交订单
					</view>
					<view class="englishTitle">
						Checkout
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" mode="center">
			<view class="popContent">
				<view class="title">
					请填写备注
				</view>
				<view class="inputContent">
					<u--input
					    placeholder="请输入备注"
					    border="surround"
					    v-model="remarkContent"
					  ></u--input>
				</view>
				<view class="operateContainer">
					<view class="cancelBtn" @click="cancel">取消</view>
					<view class="confirmBtn" @click="confirm"
					>确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inFood:true,
				userInfo:'',
				cartFoods:[],
				show:false,
				remarkContent:'',
				storeInfo:''
			}
		},
		methods: {
			close(){
				this.show=false
			},
			goBack(){
				uni.navigateBack()
			},
			goPay(){
				let method=this.judgeMethod()
				uni.request({
					url:'http://localhost:8080/kfc/user/order/submit',
					method:'post',
					header:{
						token:uni.getStorageSync('STATE_KEY').token
					},
					data:{
						amount:this.allPrice,
						remark:this.remarkContent,
						type:method,
						payMethod:1
					},
					success:(res)=>{
						console.log('确认订单成功',res.data)
						uni.navigateTo({
							url:`./orderPay?amount=${this.allPrice}&remark=${this.remarkContent}&type=${method}&orderNumber=${res.data.data.orderNumber}&id=${res.data.data.id}`
						})
					}
				})
			},
			judgeMethod(){
				if(this.inFood==true){
					return 1
				}
				else return 2
			},
			cancel(){
				this.show=false
				this.remarkContent=''
			},
			confirm(){
				this.show=false
			}
		},
		mounted(){
			this.userInfo=uni.getStorageSync('STATE_KEY')
			console.log('用户信息',this.userInfo)
			uni.request({
				url:'http://localhost:8080/kfc/user/shoppingCart/list',
				method:'get',
				header:{
					token:uni.getStorageSync('STATE_KEY').token
				},
				success:(res)=>{
					console.log('购物车信息',res.data.data)
					this.cartFoods=res.data.data
				}
			}),
			uni.request({
				url:'http://localhost:8080/kfc/shop',
				method:'get'
			}).then(res=>{
				console.log('店铺信息',res.data.data)
				this.storeInfo=res.data.data
			})
		},
		computed:{
			allPrice(){
				let price=0
				for(let i=0;i<this.cartFoods.length;i++){
					price+=(this.cartFoods[i].amount*this.cartFoods[i].number)
				}
				return price
			}
		}
	}
</script>

<style>
	page{
		background-color: rgb(245,245,245);
	}
</style>

<style lang="scss" scoped>
	.confirmContainer{
		.tabBar{
			width: 100vw;
			position: fixed;
			bottom: 0;
			left: 0;
			.warning{
				width:100vw;
				background-color: rgb(254,241,205);
				overflow: hidden;
				>view{
					font-size: 26rpx;
					margin-left: 20rpx;
					margin-top: 15rpx;
					margin-bottom: 15rpx;
				}
			}
			.confirmInfoContainer{
				width: 100vw;
				background-color: #FFF;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				height: 160rpx;
				.confirmInfo{
					display: flex;
					flex-direction: column;
					.allPay{
						display: flex;
						align-items: flex-end;
						font-weight: bold;
						.title{
							font-size: 20rpx;
						}
						.payPrice{
							font-size: 40rpx;
							line-height: 40rpx;
						}
					}
				}
				.confirmClick{
					margin-right: 20rpx;
					margin-left: 10rpx;
					width: 230rpx;
					border-radius: 15rpx;
					height: 100rpx;
					background-color: rgb(228,0,48);
					display: flex;
					flex-direction: column;
					align-items: center;
					color:#FFF;
					.title{
						font-weight: bold;
						margin-top: 10rpx;
						font-size: 32rpx;
					}
					.englishTitle{
						font-size: 24rpx;
						margin-top: 6rpx;
					}
				}
			}
		}
		.navBarContainer{
			width: 100vw;
			height: 100rpx;
			position: fixed;
			z-index: 99;
			top:100rpx;
			left: 0;
			background-color: rgb(245,245,245);
			display: flex;
			align-items: center;
			justify-content: center;
			// margin-top: 30rpx;
			.navBar{
				width: 90%;
				margin: 0 auto;
				background-color: rgb(245,245,245);
				display: flex;
				align-items: center;
				justify-content: space-between;
				.back,.other{
					width: 70rpx;
				}
				.title{
					font-size: 30rpx;
				}
			}
		}
		.allContainer{
			margin-top: 200rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			>view{
				width: 720rpx;
				background-color: #FFF;
				margin-bottom: 20rpx;
				border-radius: 15rpx;
			}
			.restContainer{
				display: flex;
				flex-direction: column;
				align-items: center;
				>view{
					width: 93%;
				}
				.restInfo{
					margin-top: 20rpx;
					display: flex;
					.restImg{
						// background-color: aliceblue;
						width: 60rpx;
						height: 80rpx;
						background-image: url(../../static/orderMeal/store.png);
						background-position: center;
						background-size: contain;
						background-repeat: no-repeat;
					}
					.restTitle{
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						.title{
							font-size: 40rpx;
						}
						.warning{
							display: flex;
							align-items: center;
							color:#999999;
							font-size: 26rpx;
							margin-top: 7rpx;
						}
					}
				}
				.selectMethod{
					margin-top: 20rpx;
					margin-bottom: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.in>{
						.img{
							background-image: url(../../static/orderMeal/carteen.png);
						}
					}
					.out{
						.img{
							background-image: url(../../static/orderMeal/out.png);
						}
					}
					>view{
						display: flex;
						align-items: center;
						border-radius: 10rpx;
						width: 315rpx;
						height: 100rpx;
						border: 5rpx solid rgb(217,217,217);
						transition: all 0.3s;
						position: relative;
						.check{
							transition: all 0.3s;
							position: absolute;
							width: 40rpx;
							height: 40rpx;
							border-top-right-radius: 10rpx;
							background-color: rgb(228,0,48);
							right: -1rpx;
							top: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							opacity: 0;
						}
						.img{
							margin-left: 40rpx;
							width: 70rpx;
							height: 70rpx;
							background-position: center;
							background-size: contain;
							// background-color: aliceblue;
						}
						.info{
							margin-left: 15rpx;
							display: flex;
							flex-direction: column;
							.title{
								font-size: 26rpx;
							}
							.content{
								font-size: 22rpx;
								margin-top: 5rpx;
								color:#999999;
							}
						}
					}
				}
			}
			.phone{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title{
					font-size: 28rpx;
					margin-left: 15rpx;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
				}
				.phoneNumber{
					margin-right: 15rpx;
					font-size: 28rpx;
				}
			}
			.orderInfo{
				display: flex;
				flex-direction: column;
				align-items: center;
				>view{
					width: 93%;
				}
				>.title{
					border-bottom: 1px solid rgb(217,217,217);
					.content{
						margin-top: 20rpx;
						margin-bottom: 10rpx;
						font-size: 36rpx;
						font-weight: bold;
					}
				}
				.allContent{
					margin-top: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					>.food{
						width: 100%;
						margin-bottom: 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						.infoContent{
							display: flex;
							.foodImg{
								width: 120rpx;
								height: 80rpx;
								// background-color: aliceblue;
								background-position: center;
								background-size: cover;
								background-repeat: no-repeat;
							}
							.info{
								margin-left: 10rpx;
								display: flex;
								flex-direction: column;
								.name{
									font-size: 28rpx;
								}
								.foodContent{
									margin-top: 6rpx;
									margin-bottom: 6rpx;
									display: flex;
									flex-direction: column;
									.showContent{
										font-size: 22rpx;
										color:#999999;
									}
									font-size:26rpx;	
								}
							}
						}
						.priceContainer{
							display: flex;
							align-items: flex-end;
							font-weight: bold;
							font-size: 24rpx;
							.price{
								font-size: 28rpx;
							}
						}
					}
				}
			}
			.otherInfo{
				display: flex;
				flex-direction: column;
				align-items: center;
				>view{
					width: 93%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.title{
						font-size: 28rpx;
					}
					.content{
						font-size: 28rpx;
						color:#999999;
						>view{
							display: flex;
							align-items: center;
						}
					}
				}
				.remark{
					margin-top: 20rpx;
					margin-bottom: 20rpx;
				}
				.method{
					margin-bottom: 20rpx;
				}
			}
		}
		.popContent{
			display: flex;
			flex-direction: column;
			align-items: center;
			.title{
				margin-top: 40rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				font-size: 36rpx;
			}
			.inputContent{
				margin-top: 30rpx;
				width: 400rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
			}
			.operateContainer{
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				>view{
					width: 120rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10rpx;
				}
				.cancelBtn{
					border: 1px solid #999999;
				}
				.confirmBtn{
					border:1px solid rgb(228,0,48);
					background-color: rgb(228,0,48);
					color:#FFF;
					margin-left: 30rpx;
				}
			}
		}
	}
</style>
